<template>
  <el-form ref="form" label-width="110px" :model="formValue">
    <el-row class="flex-row">
      <el-col :span="6">
        <el-form-item label="字典A" prop="choice1">
          <choice
            v-model="formValue.choice1"
            url="/dict/some"
            :where="{tag : 'a'}"
            cache-key="a"
            :can-cached="true"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="字典B" prop="choice2">
          <choice
            v-model="formValue.choice2"
            url="/dict/some"
            :where="{tag : 'b'}"
            cache-key="b"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="getCache">get cache</el-button>
      </el-col>
      <el-col>
        <div ref="showCache">{{ cache }}</div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formValue: {
        choice1: '',
        choice2: ''
      },
      cache: ''
    }
  },
  mounted() {
  },
  methods: {
    getCache(tag) {
      console.log(this.$store.getters.loadCache('a'))
    }
  }
}
</script>

<style>

</style>
